<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div class="imgList">
    <!-- 头部 -->
    <headers text="图片分享" >
      <template #left>
        <span class="iconfont icon-fanhui1" @click="$router.back()"></span>
      </template>
    </headers>
    <!-- 导航栏 -->
    <van-tabs
      v-model="active"
      sticky
      animated
      swipeable
      line-height="2px"
      line-width="60px"
      color="#39b54a"
      title-active-color="#39b54a"
    >
      <van-tab
        :title="value.title"
        v-for="value in imgCateList"
        :key="value.id"
      >
        <!-- 图片块 -->
        <p v-if="imgList.length === 0" class="myP">没有更多的数据</p>
        <ImgBlock
          v-for="item in imgList"
          :key="item.id"
          :title="item.title"
          :desc="item.zhaiyao"
          :picUrl="item.img_url"
          @click.native="$router.push({ path: `/ImgDetail/${item.id}` })"
        ></ImgBlock>
      </van-tab>
    </van-tabs>
    <!-- 返回顶部 -->
    <div class="toTop" @click="toTOP">
      <van-icon name="back-top" size="30" color="#1989fa" />
    </div>
    <!-- 底部 -->
    <footers :list="goods"></footers>
  </div>
</template>


<script>
// 引入 组件
import headers from "@/components/headers.vue";
import footers from "@/components/footers.vue";
import ImgBlock from "@/components/ImgBlock.vue";

// 引入api
import { getImgCategory, getImgList } from "@/apis/images";

export default {
  data() {
    return {
      goods: [
        {
          icon: "icon-jia1",
          text: "首页",
          name: "index",
        },
        {
          icon: "icon-huiyuan",
          text: "会员",
          name: "info",
        },
        {
          icon: "icon-gouwuche",
          text: "购物车",
          name: "shop",
        },
        {
          icon: "icon-1-1",
          text: "搜索",
          name: "search",
        },
      ],
      active: 0, //选中的导航
      imgCateList: [], //图片分类列表
      imgList: [], //图片列表
    };
  },
  async mounted() {
    // 图片分类
    this.imgCateList = (await getImgCategory()).data.message;
    this.imgCateList.unshift({ id: 0, title: "全部" });
    // console.log(this.imgCateList);

    // 获取全部图片
    this.init(0);
  },
  methods: {
    // 返回顶部
    toTOP() {
      window.scrollTo(0, 0);
    },
    // 获取图片列表
    async init(id) {
      // 图片列表
      this.imgList = (await getImgList({ cateid: id })).data.message;
      // console.log(this.imgList);
    },
  },
  watch: {
    // 监视 激活项的变化
    active(newActive) {
      let cateID = this.imgCateList[newActive].id;
      this.init(cateID);
      // console.log(cateID);
    },
  },
  components: { headers, footers, ImgBlock },
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
.imgList {
  padding-bottom: 50/375 * 100vw;
  position: relative;
}
.toTop {
  width: 30/375 * 100vw;
  height: 30/375 * 100vw;
  background-color: #fff;
  text-align: center;
  line-height: 30/375 * 100vw;
  position: fixed;
  right: 0;
  top: 70%;
}
.myP {
  margin-top: 20/375 * 100vw;
  width: 100%;
  text-align: center;
}
</style>